Hovers

Some items when you hover your mouse over them show a hint. To control the properties of this tooltip, plotly offers a number of properties that usually start with hover.

Plotly user guide to work with it.

Hover template

This is a variable that specifies how the information is displayed in the tooltip. For more information check section in the official documentation about hover templates.

Basic

So in the following example there is a scatter with blue dots that have hovertemplate specified and a scatter with red dots that don’t have hovertemplate specified.

import numpy as np
import plotly.graph_objects as go

sample_size = 100

fig = go.Figure()
fig.add_trace(
    go.Scatter(
        x = np.random.rand(sample_size),
        y = np.random.rand(sample_size),
        mode = "markers",
        hovertemplate = "x=%{x}<br>y=%{y}",
        name = "I have hovertemplate",
        marker_size = 10
    )
)
fig.add_trace(
    go.Scatter(
        x = np.random.rand(sample_size),
        y = np.random.rand(sample_size),
        mode = "markers",
        marker={"color" : "red"},
        name = "No hovertemplate",
        marker_size = 10
    )
)

fig.update_layout(
    width = 700,
    height = 700
)

%{variable}

You can display different parameters of elements on the plots, just using syntax {%variable}. And you can add some formatting, see here and here for dates.

import numpy as np
import plotly.graph_objects as go
from IPython.display import HTML

sample_size = 100

languages = ["R", "Python", "Java Script", "Matlab"]
users = [2, 5, 3, 2.5]
text = ["textA", "TextB", "TextC", "TextD"]

fig = go.Figure()
fig.add_trace(
    go.Pie(
        name = "",
        values = users,
        labels = languages,
        text = text,
        hovertemplate = "%{label}: <br>Popularity: %{percent} <br>%{text}<extra></extra>"
    )
)
display(HTML(fig.to_html()))


fig = go.Figure()
fig.add_trace(
    go.Bar(
        x = languages,
        y = users,
        text = text,
        hovertemplate = "%{x} has %{y} users <extra></extra>"
    )
)
HTML(fig.to_html())

<extra>

An additional block is added to the tooltip - by default, it is a semi-prominent part to the left of the main tooltip. Its content is resolved by the <extra> tag in hovertemplate. To get rid of it, the <extra> tag should be left empty.

So in the following example, I build the scatter with different cases with <extra>:

sample_size = 50

plot_params = [
    dict(name = "No hovertemplate"),
    dict(
        hovertemplate = "%{x} - %{y}",
        name = "No extra",
    ),
    dict(
        hovertemplate = "%{x} - %{y}<extra></extra>",
        name = "Empty extra",
    ),
    dict(
        hovertemplate = "%{x} - %{y}<extra>random hovertext %{hovertext}</extra>",
        name = "Content in extra",
        hovertext = [
            "".join(
                np.random.choice([i for i in "abdcefghijkilm"], 10)
            )
            for i in range(sample_size)
        ]
    )
]

fig = go.Figure()
for pp in plot_params:
    fig.add_trace(
        go.Scatter(
            x = np.random.rand(sample_size),
            y = np.random.rand(sample_size),
            mode = "markers",
            marker_size = 10,
            **pp
        )
    )

fig.update_layout(
    width = 700,
    height = 700
)

fig.show()